<script setup>
import { onMounted, ref } from 'vue';
import { getNoteList } from '@/apis/noteList';
import { postNoteList } from '@/apis/noteList';

const List = ref([])
const getList = async () => {
  const res = await getNoteList()
  List.value = res.data
}
onMounted(() => {
  getList()
})
//表单数据绑定
const ipt = ref('')
// 添加数据
const addList = async () => {
  if (ipt.value.trim() === '') {
    alert('请输入信息')
    return
  }
  await postNoteList(ipt.value)
  getList()
  ipt.value = ''
}
</script>
<template>
  <router-link to="/note/user" class="user">个人主页</router-link>
  <div class="note">
    <!-- 标题 -->
    <div class="title">记事本</div>
    <div class="content">
      <input type="text" v-model="ipt">
      <!-- 按钮 -->
      <el-button type="info" text bg class="add" @click="addList">
        添加
      </el-button>
      <!-- 列表 -->
      <div class="list" v-show="true">
        <ul>
          <li v-for="(item, index) in List" :key="item.id">
            {{ index + 1 }}. {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.note {
  text-align: center;
  margin-top: 150px;

  .title {
    font-size: 50px;
    margin-bottom: 30px;
  }

  .content {
    width: 700px;
    margin: 0 auto;

    input {
      font-size: 50px;
    }

    .add {
      width: 50px;
      height: 50px;
      line-height: 300px;
      margin-left: 20px;
      margin-bottom: 25px;
    }

    .list {
      // border: 1px solid #000;
      width: 100%;
      height: 400px;

      ul {
        height: 100%;
        overflow: auto;

        li {
          margin-bottom: 20px;
          height: 70px;
          background-color: rgba(255, 224, 235, 0.6);
          line-height: 70px;
          font-size: 20px;
        }
      }

    }
  }
}

.user {
  position: fixed;
  top: 0px;
  right: 0px;
}
</style>
